import { NavBar} from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import { useState, useEffect, useRef } from 'react'
import './Nabar.css'
function Nabar(props:any) {
    const {title, sticky = true} = props
    const nav = useNavigate()
    const [isVisible, setIsVisible] = useState(true)
    const [isScrolled, setIsScrolled] = useState(false)
    const lastScrollY = useRef(0)
    const navbarRef = useRef<HTMLDivElement>(null)
    useEffect(() => {
        if (!sticky) return
        const handleScroll = () => {
            const currentScrollY = window.scrollY
            // 添加滚动时的阴影效果
            if (currentScrollY > 10) {
                setIsScrolled(true)
            } else {
                setIsScrolled(false)
            }

            // 向下滚动时隐藏导航栏，向上滚动时显示
            if (currentScrollY > lastScrollY.current && currentScrollY > 100) {
                setIsVisible(false)
            } else {
                setIsVisible(true)
            }

            lastScrollY.current = currentScrollY
        }

        window.addEventListener('scroll', handleScroll, { passive: true })
        
        return () => {
            window.removeEventListener('scroll', handleScroll)
        }
    }, [sticky])
    return (
        <div 
            ref={navbarRef}
            className={`navbar-container ${isVisible ? 'navbar-visible' : 'navbar-hidden'} ${isScrolled ? 'navbar-scrolled' : ''}`}
        >
            <NavBar onBack={() => nav(-1)}>{title}</NavBar>
        </div>
    )
}
export default Nabar
